<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import FooterToolbar from '@/layouts/basic/FooterToolbar.vue'
import type { TableColumns } from '@/types/antd'
import { t } from '@/libs/utils/i18n'

defineOptions({
	name: 'product_goods_GoodsInfo'
})

const toAddSkuColumns = [
	{
		title: '排序',
		dataIndex: 'sort'
	},
	{
		title: '封面',
		dataIndex: 'cover'
	},
	{
		title: '销量',
		dataIndex: 'salesVolume'
	},
	{
		title: '库存数量',
		dataIndex: 'inventory'
	},
	{
		title: '成本价(元)',
		dataIndex: 'costPrice'
	},
	{
		title: '上级分佣(元)',
		dataIndex: 'commissionPrice'
	},
	{
		title: '店主价(元)',
		dataIndex: 'shopPrice'
	},
	{
		title: '分享奖励(元)',
		dataIndex: 'rewardPrice'
	},
	{
		title: '售价(元)',
		dataIndex: 'salePrice'
	},
	{
		title: '指导价(元)',
		dataIndex: 'guidePrice'
	}
]

const route = useRoute()
const router = useRouter()

const id = ref(0)
const spu = reactive({
	_remoteFreights: [],
	name: '',
	numbering: '',
	_status: '',
	_categoryChainName: '',
	_supplierNameMobile: '',
	_keywords: [],
	is_virtual: '',
	is_second_hand: '',
	_putOnSaleRange: [],
	is_put_on_sale: '',
	is_auto_put_on_sale: '',
	is_auto_put_off_sale: '',
	freight_price: '',
	is_present_insurance: ''
} as any)
const skus = ref([])
const attrs = ref([])
const materials = ref<any[]>([]) // 添加素材列表

// 使用函数动态返回偏远地区运费表头，实现语言切换时的实时更新
const remoteFeightColumns = computed(
	(): TableColumns => [
		{
			title: t('地区'),
			dataIndex: '_provinceName',
			align: 'center' as const,
			key: '_provinceName'
		},
		{
			title: t('追加运费'),
			dataIndex: 'appendFreightPrice',
			align: 'center' as const,
			key: 'appendFreightPrice'
		}
	]
)

// 使用函数动态返回SKU表头，实现语言切换时的实时更新
const skuColumns = computed((): TableColumns => {
	const columns: TableColumns = []

	// 动态属性列
	attrs.value.forEach((attr: any) => {
		columns.push({
			title: attr.k,
			dataIndex: attr.uuid,
			align: 'center',
			width: 100,
			minWidth: 100,
			customRender: (item: any) => {
				return item.record[attr.uuid].attrV.value
			}
		})
	})

	// 固定列
	toAddSkuColumns.forEach(item => {
		const _column = {
			title: t(`商品详细.${item.dataIndex}`),
			dataIndex: item.dataIndex,
			align: 'center' as const,
			width: 120,
			minWidth: 120
		}
		columns.push(_column)
	})

	return columns
})

// 获取素材类型描述
const getMaterialTypeDesc = (type: number) => {
	const typeDatas = Enums.goods.material.typeDatas
	switch (type) {
		case typeDatas.TEXT[0]:
			return typeDatas.TEXT[1]
		case typeDatas.IMAGE[0]:
			return typeDatas.IMAGE[1]
		case typeDatas.VIDEO[0]:
			return typeDatas.VIDEO[1]
		default:
			return t('素材编辑.未知类型')
	}
}

const getGoodsInfo = () => {
	id.value = Number(route.query.id) || 0
	if (id.value > 0) {
		const formParams = { id: id.value, permissionName: '商品库-商品管理-商品详细' }
		Api.post('/product/goods/info', formParams, true).then((res: any) => {
			spu._remoteFreights = res.spu._remoteFreights || []
			spu.name = res.spu.name || ''
			spu.numbering = res.spu.numbering || ''
			spu._status = res.spu._status || ''
			spu._categoryChainName = res.spu._categoryChainName || ''
			spu._supplierNameMobile = res.spu._supplierNameMobile || ''
			spu._keywords = res.spu._keywords || []
			spu.is_virtual = res.spu.is_virtual || ''
			spu.is_second_hand = res.spu.is_second_hand || ''
			spu._putOnSaleRange = res.spu._putOnSaleRange || []
			spu.is_put_on_sale = res.spu.is_put_on_sale || ''
			spu.is_auto_put_on_sale = res.spu.is_auto_put_on_sale || ''
			spu.is_auto_put_off_sale = res.spu.is_auto_put_off_sale || ''
			spu.freight_price = res.spu.freight_price || ''
			spu.is_present_insurance = res.spu.is_present_insurance || ''
			skus.value = res.skus || []
			attrs.value = res.attrs || []
			materials.value = res.materials || []
		})
	}
}

onMounted(() => {
	getGoodsInfo()
})
</script>

<template>
	<IsGuest>
		<view :class="{ 'flex justify-start items-start': true }">
			<view>
				<a-descriptions
					:title="t('商品详细.商品基础信息')"
					:column="1"
					:labelStyle="{ fontSize: '16px' }"
					:contentStyle="{ color: '#999', fontSize: '16px' }">
					<a-descriptions-item :label="t('商品详细.商品名')">
						{{ spu.name }}
					</a-descriptions-item>
					<a-descriptions-item :label="t('商品详细.商品编号')">
						{{ spu.numbering }}
					</a-descriptions-item>
					<a-descriptions-item :label="t('商品详细.商品状态')">
						{{ spu._status }}
					</a-descriptions-item>
					<a-descriptions-item :label="t('商品详细.商品分类')">
						{{ spu._categoryChainName }}
					</a-descriptions-item>
					<a-descriptions-item :label="t('商品详细.供应商')">
						{{ spu._supplierNameMobile }}
					</a-descriptions-item>
					<a-descriptions-item :label="t('商品详细.搜索关键字')">
						<a-tag v-for="(item, key) in spu._keywords" :key="key">{{ item }}</a-tag>
					</a-descriptions-item>
					<a-descriptions-item :label="''">
						<a-tag color="blue" v-if="spu.is_virtual === Enums.common.isDatas.Y[0]">
							{{ t('商品详细.虚拟商品') }}
						</a-tag>
						<a-tag color="blue" v-if="spu.is_second_hand === Enums.common.isDatas.Y[0]">
							{{ t('商品详细.二手商品') }}
						</a-tag>
					</a-descriptions-item>
				</a-descriptions>
			</view>
			<view>
				<a-descriptions
					:title="t('商品详细.销售信息')"
					:column="1"
					:labelStyle="{ fontSize: '16px' }"
					:contentStyle="{ color: '#999', fontSize: '16px' }">
					<a-descriptions-item :label="t('商品详细.销售时间')">
						<view v-if="spu._putOnSaleRange">
							{{ spu._putOnSaleRange[0] ?? t('商品详细.未设置') }} 至
							{{ spu._putOnSaleRange[1] ?? t('商品详细.未设置') }}
						</view>
					</a-descriptions-item>
					<a-descriptions-item :label="t('商品详细.上架状态')">
						<view v-if="spu.is_put_on_sale === Enums.common.isDatas.Y[0]">
							{{ t('商品详细.已上架') }}
						</view>
						<view v-else>{{ t('商品详细.未上架') }}</view>
					</a-descriptions-item>
					<a-descriptions-item :label="''">
						<a-tag
							color="blue"
							v-if="spu.is_auto_put_on_sale === Enums.common.isDatas.Y[0]">
							{{ t('商品详细.自动上架') }}
						</a-tag>
						<a-tag
							color="blue"
							v-if="spu.is_auto_put_off_sale === Enums.common.isDatas.Y[0]">
							{{ t('商品详细.自动下架') }}
						</a-tag>
					</a-descriptions-item>
				</a-descriptions>
				<a-descriptions
					:title="t('商品详细.运费信息')"
					:column="1"
					:labelStyle="{ fontSize: '16px' }"
					:contentStyle="{ color: '#999', fontSize: '16px' }">
					<a-descriptions-item :label="t('商品详细.运费')">
						{{ spu.freight_price }}
					</a-descriptions-item>
				</a-descriptions>
				<a-descriptions
					:title="t('商品详细.其他信息')"
					:column="1"
					:labelStyle="{ fontSize: '16px' }"
					:contentStyle="{ color: '#999', fontSize: '16px' }">
					<a-descriptions-item :label="t('商品详细.是否赠送运费险')">
						<view>{{ Enums.common.isDataGetText(spu.is_present_insurance) }}</view>
					</a-descriptions-item>
				</a-descriptions>
			</view>
			<view>
				<a-descriptions
					v-if="spu._remoteFreights.length > 0"
					:title="t('商品详细.偏远地区运费')"
					:column="1"
					:labelStyle="{ fontSize: '16px' }"
					:contentStyle="{ color: '#999', fontSize: '16px' }">
					<a-descriptions-item>
						<a-table
							:bordered="true"
							:pagination="false"
							:columns="remoteFeightColumns"
							:data-source="spu._remoteFreights"></a-table>
					</a-descriptions-item>
				</a-descriptions>
			</view>
		</view>

		<a-divider>{{ t('商品详细.sku属性') }}</a-divider>
		<view>
			<a-table :bordered="true" :pagination="false" :columns="skuColumns" :data-source="skus">
				<template #bodyCell="{ text, record, index, column }">
					<template v-if="column.dataIndex === 'cover'">
						<div class="editable-cell">
							<div class="editable-cell-input-wrapper">
								<div :class="{ 'min-w-60px': true }">
									<AddCover :showOnly="true" v-model="record.cover" />
								</div>
							</div>
						</div>
					</template>
				</template>
			</a-table>
		</view>
		<view v-if="false">
			<a-button @click="console.log(skus)">consoleLogSkus</a-button>
		</view>
		<footer-toolbar>
			<a-button @click="router.push({ path: '/product/goods/list' })">
				{{ t('商品详细.商品列表') }}
			</a-button>
			<a-button
				v-if="Api.hasPermission('商品库-商品管理-商品详细')"
				@click="router.push({ path: '/product/goods/add' })">
				{{ t('商品详细.新建') }}
			</a-button>
			<a-button
				v-if="Api.hasPermission('商品库-商品管理-复制商品')"
				@click="router.push({ path: '/product/goods/copy', query: { copiedById: id } })">
				{{ t('商品详细.复制') }}
			</a-button>
			<a-button
				v-if="Api.hasPermission('商品库-商品管理-修改商品')"
				@click="router.push({ path: '/product/goods/edit', query: { id: id } })">
				{{ t('商品详细.编辑') }}
			</a-button>
			<a-button
				v-if="Api.hasPermission('商品库-商品管理-素材编辑')"
				@click="router.push({ path: '/product/goods/materialEdit', query: { id: id } })">
				{{ t('商品详细.素材编辑') }}
			</a-button>
		</footer-toolbar>
	</IsGuest>
</template>

<style lang="scss" scoped></style>
